본문으로 건너뛰기

Q. HTML 어트리뷰트와 DOM 프로퍼티의 차이는 무엇인가요?

🧑🏻‍💻 Answer.​

✅ 정의​

  • HTML 어트리뷰트 : HTML 문서에서 요소의 시작 태그 내에 선언되어 정의되고 파싱됩니다.

  • DOM 프로퍼티 : DOM을 통해 JS 코드로 요소에 접근하고 조작할 수 있는 속성 또는 메서드입니다.

✅ 저장 형식​

  • HTML 어트리뷰트 : 문자열 형태로 저장됩니다.

  • DOM 프로퍼티 : JS 데이터 형식으로 저장됩니다.

✅ 관리 영역​

  • HTML 어트리뷰트 : 요소 노드의 초기 상태를 관리합니다.

  • DOM 프로퍼티 : 요소 노드의 최신 상태를 관리한다.

✅ 언제 사용되는 지​

  • HTML 어트리뷰트 : 주로 초기 속성값을 정의하거나, CSS 스타일, 레이아웃 정보, 이미지 경로, 하이퍼링크 등을 지정하는 데 사용됩니다.

  • DOM 프로퍼티 : 요소의 상태 및 동작을 제어하거나 변경할 때 사용됩니다.

✅ 값 읽어오는 방식​

  • HTML 어트리뷰트 : getAttribute() 메서드를 사용합니다.

  • DOM 프로퍼티 : 해당 요소 객체의 프로퍼티를 직접 사용합니다.

✅ 중요한 차이점​

  • HTML 어트리뷰트는 초기 HTML 문서에서 정의된 값으로 요소의 기본 속성을 나타냅니다.

  • 초기 정의 이후 JavaScript 코드를 통해 DOM 프로퍼티를 변경하면 DOM 프로퍼티의 값이 업데이트되지만 HTML 어트리뷰트 값은 변경되지 않습니다.

  • DOM 프로퍼티와 HTML 어트리뷰트 간의 일치 여부는 HTML 문서의 초기 상태와 JavaScript 코드의 현재 상태 간의 차이를 나타냅니다.